<template>
  <page-wrap
    :show-top="dynamicTitle"
    :title="dynamicTitle"
    hide-tab
    bg-color="#fff"
    back
  >
    <view class="content" :style="'padding-top:' + navHeight + 'px;'">
      <!-- <view class="nav-title"></view> -->
      <image class="nav-title" :src="placeholderTitleImg"></image>
      <!-- <view class="yl-job"></view> -->
      <view class="search-content" @click="searchClick">
        <view class="search-title">{{ placeholderSearchTitle }}</view>
        <image class="search-icon" :src="iconImage"></image>
      </view>
      <scroll-view class="icon-content" scroll-x="true" style="">
        <view
          class="icon-item"
          v-for="(item, index) in iconList"
          :key="index"
          @click="itemClick(item)"
          style="display: inline-block; min-width: 22%"
        >
          <image class="item-icon" :src="item.iconImage"></image>
          <view class="icon-title">{{ item.iconTitle }}</view>
        </view>
      </scroll-view>
      <view class="bannerContainer">
        <template v-if="goldenPlanList && goldenPlanList.length">
          <!-- 金牌专家方案服务卡片 -->
          <view class="golden-plan-card">
            <view class="golden-plan-title">
              <view class="golden-plan-title-left">
                <view class="golden-plan-title-left-main"
                  >金牌专家方案服务</view
                >
                <view class="golden-plan-title-left-sub"
                  >资深专家为您量身打造</view
                >
              </view>
              <view class="golden-plan-title-right">
                <textVerticalCarouselVue :userAskList="userAskList" />
              </view>
            </view>
            <view class="golden-plan-content">
              <view
                class="golden-plan-content-item"
                v-for="(item, index) in goldenPlanList"
                :key="index"
                @click="handleGoldenPlanItemClick(item)"
              >
                <view class="golden-plan-content-item-left">
                  <image
                    class="golden-plan-content-item-left-image"
                    :src="item.imgUrl"
                  ></image>
                  <view
                    class="golden-plan-content-item-left-desc"
                    :style="
                      'background:' +
                      (item.content ||
                        'linear-gradient(#FF8848 0%, #FF6100 100%)')
                    "
                  >
                    {{ item.title }}</view
                  >
                </view>
                <view class="golden-plan-content-item-right">
                  <template>
                    <view class="golden-plan-content-item-right-top">
                      <view class="golden-plan-content-item-right-top-avatar">
                        <image
                          v-for="(_item, _index) in item.children"
                          :key="_index"
                          :class="{
                            'golden-plan-content-item-right-top-avatar-item': true,
                            show: item.activeIndex == _index,
                          }"
                          :src="_item.avatarUrl"
                        ></image>
                      </view>
                      <view class="golden-plan-content-item-right-top-desc">{{
                        item.parentTitle || "向陈老师提问"
                      }}</view>
                      <image
                        class="golden-plan-content-item-right-top-icon"
                        src="https://img3.job1001.com/ypMp/elan/images/career/positionDictionary/rightTriangle.svg"
                      >
                      </image>
                    </view>
                    <view class="golden-plan-content-item-right-mid">
                      <view
                        v-for="(_item, _index) in item.children"
                        :class="{
                          'golden-plan-content-item-right-mid-item': true,
                          active: item.activeIndex == _index,
                        }"
                        :key="_index"
                      >
                        {{ _item.content }}
                      </view>
                    </view>
                  </template>
                  <view class="golden-plan-content-item-right-btm">
                    <view class="golden-plan-content-item-right-btm-btn">
                      立即提问
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </template>
        <image
          :src="getBannerUrl()"
          v-if="careerPathSaleClientId == 123"
          mode="widthFix"
          :show-menu-by-longpress="careerPathSaleClientId == 123"
          @click="handleBannerClick"
        />
      </view>
      <view class="hotArticleListContainer" v-if="hotArticleList.length">
        <view class="title-container">
          <view class="listTitle">
            <img class="titleIcon" :src="hotArticleListTitleIcon" />
            高考热点
          </view>
          <view
            :style="{ background: concernBgc }"
            class="concernFirst"
            v-if="concernContent == '关注最新资讯'"
            @click="handleClickConcern"
            >{{ concernContent }}<img class="titleIcon" :src="addConcernIcon"
          /></view>
          <view
            :style="{ background: concernBgc }"
            class="concern"
            v-else
            @click="handleClickConcern"
            >{{ concernContent }}<img class="titleIcon" :src="addConcernIcon"
          /></view>
        </view>
        <scroll-view class="hotArticleList" scroll-y scroll-with-animation>
          <view
            class="hotArticleItem"
            v-for="(item, index) in hotArticleList"
            :key="index"
            @click="hotArticleItemClick(item)"
          >
            <span :class="{ hotArticleIndex: true, isFront: index >= 2 }">{{
              index + 1
            }}</span>
            <view class="hotArticleTitle">
              {{ item.content }}
            </view>
          </view>
        </scroll-view>
      </view>
      <view class="about-yl">
        <view class="intro">广东省人才大数据工程技术研究中心</view>
        <view class="intro-company"
          >深圳市一览网络股份有限公司（股票代码：833680）</view
        >
        <view class="jump-btn" @click="jumpToYLIntro"
          >关于 一览
          <image class="right-arrow" :src="rightArrowImage" />
        </view>
      </view>
      <!-- <view class="hotArticleListContainer">
        <view class="listTitle">
          <img class="titleIcon" :src="certificationIcon" />
          资质
        </view>
        <view class="certificationList">
          <view
            class="certification-item"
            v-for="(item, index) in certificationLists"
            :key="index"
          >
            <img class="titleIcon" :src="item.url" />
            <view class="intro">{{ item.title }}</view>
          </view>
        </view>
      </view> -->
    </view>
    <LoginDialog
      ref="loginDialog"
      @loginSuccessBack="loginSuccessBack"
    ></LoginDialog>
  </page-wrap>
</template>
<script>
// 这个页面有两个！！！如果你要修改这个页面记得搜索出另外一个进行修改
// 如果你要做切换显示效果和滚动效果的修改一定要慎重！一不小心就会造成页面文字乱动的效果
import {
  getStudentHotSearchList,
  addSubscribePersonTagRel,
  getOfficailSubscribeInfo,
} from "@/api/modules/positionDictionary.js";
import { env } from "@/api/root";

import ShareMixin from "@/mixins/share";
import { addBuryingPoint } from "@/api/modules/career";
import textVerticalCarouselVue from "@/pagesSub/components/textVerticalCarousel.vue";
import { throttle } from "lodash";
import LoginDialog from "@/components/LoginDialog";

export default {
  mixins: [ShareMixin],
  components: {
    textVerticalCarouselVue,
    LoginDialog,
  },
  data() {
    return {
      concernBgc: "",
      concernContent: "关注最新资讯",
      activeIndex: 0,
      nextIndex: 1,
      leaveIndex: null,
      userAskList: [],
      rightArrowImage:
        this.$imgBaseSelf + "career/positionDictionary/about-yl-rightArrow.png",
      certificationLists: [
        {
          img:
            this.$imgBaseSelf +
            "career/positionDictionary/certification-rcdsjgcjs.png",
          content: "广东省人才大数据工程技术研究中心提供数据服务",
        },
        {
          img:
            this.$imgBaseSelf +
            "career/positionDictionary/certificationIcon-jybgxz.png",
          content: "              ",
        },
      ], // 资质列表
      dynamicTitle: "",
      hotArticleList: [],
      goldenPlanList: [],
      careerPathSaleClientId: "",
      bannerUrl: "",
      imageUrl: "",
      // shareTitle: "查一查高薪专业，高就业率专业",
      shareTitle: "高考志愿填报专业热搜榜",
      sharePath: "/pagesSub/careerGrow/careerSearch/index",
      navTitle: "高考志愿填报专业热搜榜",
      placeholderTitle: "高考学子正在查的专业/职业",
      navHeight: getApp().globalData.navHeight,
      iconImage:
        this.$imgBaseSelf + "career/positionDictionary/careerSearch_fdj.png",
      hotArticleListTitleIcon:
        this.$imgBaseSelf +
        "career/positionDictionary/hotArticleListTitleIcon.svg",
      addConcernIcon:
        this.$imgBaseSelf + "career/positionDictionary/addConcernIcon.png",
      certificationIcon:
        this.$imgBaseSelf + "career/positionDictionary/certificationIcon.png",
      iconList: [
        {
          iconImage:
            this.$imgBaseSelf + "career/positionDictionary/icon_major1.png",
          iconTitle: "新高考选科",
          itemId: 4,
        },
        {
          iconImage: this.$imgBaseSelf + "career/positionDictionary/czyNew.png",
          iconTitle: "查专业",
          itemId: 1,
        },
        {
          iconImage:
            this.$imgBaseSelf + "career/positionDictionary/icon_career1.png",
          iconTitle: "查职业",
          itemId: 2,
        },
        {
          iconImage:
            this.$imgBaseSelf + "career/positionDictionary/icon_salary1.png",
          iconTitle: "查薪酬",
          itemId: 3,
        },
        {
          iconImage:
            this.$imgBaseSelf + "career/positionDictionary/icon_test1.png",
          iconTitle: "职业测评",
          itemId: 0,
        },
        {
          iconImage:
            this.$imgBaseSelf + "career/positionDictionary/icon_test2.png",
          iconTitle: "性格测评",
          itemId: 5,
        },
      ],
      shareCareerInfoParams: {},
      buryingPointId: "",
      cardType: "",
      // placeholderTitleImg:
      //   "https://upload.yl1001.com/upload/files/view?file=Uykd-IIojnEGQEl9e1RXePWo/=07f9R2vLcp6v-sJnEUQ3Jy1o9,Eu9BU6T8s.png",
      placeholderTitleImg:
        this.$imgBaseSelf + "career/positionDictionary/jbtm20240625.png",
      placeholderSearchTitle: "高考学子正在查的专业/职业",
      goldenPlanContentTimers: [],
    };
  },
  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
  onReady() {},
  created() {
    this.reqGetStudentHotSearchList(30, "hotArticleList");
    this.getOfficailSubscribeInfoFn();
  },
  mounted() {},
  onLoad(opt) {
    console.log("opt", opt);

    this.imageUrl =
      "https://img3.job1001.com/ypMp/elan/images/career/positionDictionary/careerSearchShareImageJBTM.png";
    let jumpPersonId = "";
    if (opt.jumpPersonId) {
      jumpPersonId = opt.jumpPersonId;
    }
    let jumpSource = "";
    if (opt.jumpSource) {
      jumpSource = opt.jumpSource;
    }
    let sourceType = "";
    if (opt.sourceType) {
      sourceType = opt.sourceType;
    }
    if (opt.careerPathSaleClientId) {
      this.careerPathSaleClientId = opt.careerPathSaleClientId; //继承扫码进来的分销
      getApp().globalData.careerPathSaleClientId = opt.careerPathSaleClientId;
    } else {
      this.careerPathSaleClientId = getApp().globalData.careerPathSaleClientId;
    }
    switch (this.careerPathSaleClientId) {
      case "123":
        this.setBannerUrl(
          "https:" +
            this.$imgBaseSelf +
            "career/positionDictionary/blueCode.png"
        ); //蓝色扫码图
        break;
      case "sznews":
        // this.setBannerUrl(
        //   "https://img3.job1001.com/ypMp/elan/images/career/positionDictionary/careerSearch_newBanner22.png"
        // ); //蓝色点击图
        this.getGoldenPlanData(42);
        wx.reportEvent("sznews_qrcode_enter", {});
        break;
      case "gz":
        this.getGoldenPlanData(41);
        // this.setBannerUrl(
        //   "https://img3.job1001.com/ypMp/elan/images/career/positionDictionary/careerSearch_newBanner22.png"
        // ); //蓝色点击图
        wx.reportEvent("gz_sale_qrcode_enter", {});
        break;
      default:
        this.getGoldenPlanData(41);
        // this.setBannerUrl(
        //   "https://img3.job1001.com/ypMp/elan/images/career/positionDictionary/careerSearch_newBanner22.png"
        // );
        break;
    }
    this.shareQuery = `jumpPersonId=${this.personId}&jumpSource=10&sourceType=10&careerPathSaleClientId=${this.careerPathSaleClientId}`;
    this.sharePath = `/pagesSub/careerGrow/careerSearch/index?${this.shareQuery}`;
    console.log(" this.shareQuery ", this.shareQuery);
    this.shareCareerInfoParams = {
      etId: 20055,
      id: this.buryingPointId ? this.buryingPointId : "", //后台要求不能传空，未登录也要统计
      personId: uni.getStorageSync("person-id").slice(2) || "0",
      cardType: this.cardType
        ? this.cardType
        : uni.getStorageSync("cardType") || this.cardType,
      consultantId: uni.getStorageSync("sellId")
        ? uni.getStorageSync("sellId")
        : "",
      originType: this.originFrom == "shareLink" ? 10 : 20,
      statType: "40",
      jumpPersonId: jumpPersonId,
      jumpSource: jumpSource,
      sourceType: sourceType,
    };
    //外部链接点击统计事件
    if (jumpSource && sourceType) {
      this.addBuryingPointFn(20093, "50", jumpPersonId, jumpSource, sourceType);
    }
  },
  onShow() {
    this.addBuryingPointFn(20053, "", "", "", "");
    this.addBuryingPointFn(20054, "60", "", "", "");
    wx.reportEvent("search_career_enter_click", {}); //进入聚合搜索页
  },
  onHide() {
    console.log("这里进入了onHide周期");
    this.addBuryingPointFn(20054, "60", "", "", "");
  },
  onUnload() {
    this.addBuryingPointFn(20054, "60", "", "", "");
    this.goldenPlanContentTimers.forEach((item) => {
      clearInterval(item);
    });
  },
  onPageScroll(e) {
    //滚动改变颜色
    if (e.scrollTop >= 30) {
      this.dynamicTitle = "高考金榜题名" || "";
    } else {
      this.dynamicTitle = "";
    }
  },
  methods: {
    async getOfficailSubscribeInfoFn() {
      const params = {
        unionid: uni.getStorageSync("unionid"),
      };
      const res = await getOfficailSubscribeInfo(params);
      if (res.code == 200) {
        if (res.data.isSubscribe) {
          this.concernContent = "了解更多资讯";
          this.addConcernIcon =
            this.$imgBaseSelf +
            "career/positionDictionary/rightConcernIcon.png";
        }
      }
    },
    showLoginDialog() {
      this.$refs.loginDialog.setVisibility(true);
    },
    changeColor() {
      this.concernBgc = "#fff2ea";
      setTimeout(() => {
        this.concernBgc = "";
      }, 400);
      setTimeout(() => {
        this.concernBgc = "#fff2ea";
      }, 800);
      setTimeout(() => {
        this.concernBgc = "";
      }, 1200);
      setTimeout(() => {
        this.concernBgc = "#fff2ea";
      }, 1600);
      setTimeout(() => {
        this.concernBgc = "";
      }, 2000);
      setTimeout(() => {
        this.concernBgc = "#fff2ea";
      }, 2400);
      setTimeout(() => {
        this.concernBgc = "";
      }, 2800);
    },
    loginSuccessBack() {
      console.log("登录成功");
      this.changeColor();
      // await this.handleClickConcern();
    },
    async addSubscribePersonTagRelFn() {
      const params = {
        unionid: uni.getStorageSync("unionid"),
        subType: 30,
        personId: uni.getStorageSync("person-id").slice(2),
        subTagIds: "8,10",
        appletOpenId: uni.getStorageSync("openid"),
      };
      await addSubscribePersonTagRel(params);
    },
    async handleClickConcern() {
      if (uni.getStorageSync("person-id")) {
        const res = await getOfficailSubscribeInfo({
          unionid: uni.getStorageSync("unionid"),
        });
        if (res.code == 200) {
          if (this.concernContent == "了解更多资讯") {
            uni.navigateTo({
              url:
                "/pagesSub/careerGrow/careerSearch/webview?url=" + res.data.url,
            });
          } else {
            let tmplIds = [];
            tmplIds.push(res.data.templateId);
            console.log("tmplIds", tmplIds);
            uni.requestSubscribeMessage({
              tmplIds: tmplIds,
              complete: (_res) => {
                console.log("_res", tmplIds);
                uni.navigateTo({
                  url:
                    "/pagesSub/careerGrow/careerSearch/webview?url=" +
                    res.data.url,
                });
              },
            });
          }
        }
        this.addSubscribePersonTagRelFn();
      } else {
        this.showLoginDialog();
      }
    },
    handleGoldenPlanItemClick(item) {
      console.log("handleGoldenPlanItemClick", item.url);
      switch (item.title) {
        case "高考志愿定制服务":
          this.addBuryingPointFn(20206, "", "", "", "");
          wx.reportEvent("search_career_8980_click", {}); //聚合搜索页进入8980商品页
          break;
        case "高考选专业服务":
          this.addBuryingPointFn(20207, "", "", "", "");
          wx.reportEvent("search_career_699_click", {}); //聚合搜索页进入699商品页
          break;

        default:
          break;
      }
      let url =
        "/ec_goods/detail?productInstanceId=16868908125&vid=0&id=128377299100125";
      if (item.url) {
        url = item.url;
      }
      uni.navigateToMiniProgram({
        appId: "wx614f8a78fff34162",
        path: url,
        success(res) {},
        fail(err) {},
      });
    },
    getGoldenPlanData(type) {
      //获取金牌专家方案卡片内容
      this.reqGetStudentHotSearchList(31, "userAskList");
      this.reqGetStudentHotSearchList(type || 40, "goldenPlanList", (data) => {
        data.forEach((item, index) => {
          this.$set(item, "activeIndex", 0);
        });
        // 开启金牌专家方案卡片里的内容动画,先3秒加载一下图片
        setTimeout(() => {
          data.forEach((ele, index) => {
            const itemQuestList = ele.children;
            if (itemQuestList && itemQuestList.length) {
              this.goldenPlanContentTimers[index] = setInterval(
                () => {
                  ele.activeIndex += 1;
                  if (ele.activeIndex >= itemQuestList.length - 1) {
                    ele.activeIndex = 0;
                  }
                },
                index == 0 ? 8000 : 13000
              );
            }
          });
        }, 1500);
      });
    },
    jumpToYLIntro() {
      let url = "https://mp.weixin.qq.com/s/d1bp8v6Iw1mRj6YsmwguSQ";
      uni.navigateTo({
        url: "/pagesSub/careerGrow/careerSearch/webview?url=" + url,
      });
    },
    getSearchTitle() {
      return "高考学子正在查的专业/职业";
    },
    getBannerUrl() {
      if (this.careerPathSaleClientId == 123) {
        return (
          "https:" +
          this.$imgBaseSelf +
          "career/positionDictionary/blueCode.png"
        );
      } else {
        return (
          "https:" +
          this.$imgBaseSelf +
          "career/positionDictionary/bannerGIF1.gif"
        ); //图2
      }
    },
    getNavTitleImage() {
      return "https://upload.yl1001.com/upload/files/view?file=Uykd-IIojnEGQEl9e1RXePWo/=07f9R2vLcp6v-sJnEUQ3Jy1o9,Eu9BU6T8s.png";
    },
    // prop是要保存数据的数组字段名，callback传入函数的话会被执行
    reqGetStudentHotSearchList(searchDataType, prop, callback) {
      const params = {
        searchDataType, //查询类型   12 高薪职业 11新兴职业 22 高薪专业 21 高就业率专业排名  30 查询平均薪酬职业 40 标题和banner图动态配置
      };
      getStudentHotSearchList(params)
        .then((res) => {
          if (res.code == 200) {
            this[prop] = res.data;
            if (callback && typeof callback === "function") {
              callback(this[prop]);
            }
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
    async getStudentHotSearchListFn(searchDataType) {
      const params = {
        searchDataType: searchDataType,
      };
      const res = await getStudentHotSearchList(params);
      if (res.code == 200) {
        if (searchDataType == 50) {
          this.certificationLists = res.data;
        }
      }
    },
    hotArticleItemClick: throttle(function (item) {
      this.addBuryingPointFn(20201, "", "", "", "");
      this.openWebviewArticle(item);
    }),
    openWebviewArticle(item) {
      uni.navigateTo({
        url:
          `/pagesSub/public/web/BasewebView?title=${item.content || ""}&url=` +
          encodeURIComponent(item.url),
      });
    },
    setBannerUrl(url) {
      const that = this;
      wx.downloadFile({
        url,
        success: function (res) {
          if (res.statusCode === 200) {
            that.bannerUrl = res.tempFilePath;
          }
        },
        fail: function (err) {
          console.log("下载失败", err);
        },
      });
    },
    handleBannerClick() {
      this.addBuryingPointFn(20202, "", "", "", "");
      wx.reportEvent("search_career_banner_click", {}); //聚合搜索页—点击banner
      console.log(
        "----this.careerPathSaleClientId------->",
        this.careerPathSaleClientId
      );
      if (this.careerPathSaleClientId == 123) {
        return;
      } else if (!this.careerPathSaleClientId) {
        uni.navigateToMiniProgram({
          appId: "wx614f8a78fff34162",
          path: "/ec_goods/detail?productInstanceId=16868908125&vid=0&id=128317245100125",
          success(res) {},
          fail(err) {},
        });
      } else if (this.careerPathSaleClientId == "sznews") {
        //深圳新闻网
        wx.reportEvent("sznews_qrcode_click_jump", {});
        uni.navigateToMiniProgram({
          appId: "wx614f8a78fff34162",
          path: "/ec_goods/detail?productInstanceId=16868908125&vid=0&id=128377299100125",
          success(res) {},
          fail(err) {},
        });
      } else if (this.careerPathSaleClientId == "gz") {
        //贵州
        wx.reportEvent("gz_sale_qrcode_click_jump", {});
        uni.navigateToMiniProgram({
          appId: "wx614f8a78fff34162",
          path: "/ec_goods/detail?vid=0&productInstanceId=16868908125&id=128397590100125",
          success(res) {},
          fail(err) {},
        });
      }
    },
    //普通的埋点+事件停留埋点
    async addBuryingPointFn(
      etId,
      statType,
      jumpPersonId,
      jumpSource,
      sourceType
    ) {
      const params = {
        etId: etId,
        id: this.buryingPointId ? this.buryingPointId : "", //后台要求不能传空，未登录也要统计
        personId: uni.getStorageSync("person-id").slice(2) || "0",
        consultantId: uni.getStorageSync("sellId")
          ? uni.getStorageSync("sellId")
          : "",
        originType: this.originFrom == "shareLink" ? 10 : 20,
        statType: statType ? statType : "10",
        jumpPersonId: jumpPersonId,
        jumpSource: jumpSource,
        sourceType: sourceType,
      };
      const res = await addBuryingPoint(params);
      if (res.code == 200) {
        if (res.data.id) {
          if (etId == 20054) this.buryingPointId = res.data.id;
        }
      }
    },
    searchClick() {
      this.addBuryingPointFn(20049, "", "", "", "");
      uni.navigateTo({
        //查专业/职业搜索
        url: `/pagesSub/careerNew/positionDictionary/searchPosNew`,
      });
    },
    itemClick(item) {
      if (item.itemId === 0) {
        this.addBuryingPointFn(20056, "", "", "", "");
        wx.reportEvent("search_career_measure_click", {}); //聚合搜索页—职业测评
        //职业测评
        uni.navigateTo({
          url: `/pagesSub/career/activity/vocationalAssessment?fromWhere=junior`,
        });
      } else if (item.itemId === 1) {
        this.addBuryingPointFn(20050, "", "", "", "");
        wx.reportEvent("search_career_major_click", {}); //聚合搜索页—点击查专业
        //查专业
        uni.navigateTo({
          url: `/pagesSub/careerNew/positionDictionary/MajorSearchSub`,
        });
      } else if (item.itemId === 2) {
        this.addBuryingPointFn(20051, "", "", "", "");
        wx.reportEvent("search_career_job_click", {}); //聚合搜索页—点击查职业
        //查职业
        // uni.reLaunch({
        //   url: `/pages/career/positionDictionary/allCategory?fromOrigin=careerSearch&showReturnBtnTop=true`,
        // });
        uni.navigateTo({
          url: `/pagesSub/careerGrow/allCategory/allCategory?fromOrigin=careerSearch&showReturnBtnTop=true`,
        });
        uni.setStorageSync("showReturnBtnTop", true); // 存储起来 下次从下一级页面返回来的时候去缓存中取这个值表示要显示左上角返回箭头
      } else if (item.itemId === 3) {
        this.addBuryingPointFn(20052, "", "", "", "");
        wx.reportEvent("search_career_salary_click", {}); //聚合搜索页—点击查薪酬
        //查薪酬
        uni.navigateTo({
          url: `/pagesSub/careerGrow/salarySearch/index`,
        });
      } else if (item.itemId === 4) {
        this.addBuryingPointFn(40035, "", "", "", "");
        // wx.reportEvent("search_career_salary_click", {}); //聚合搜索页—点击查薪酬
        //查薪酬
        uni.navigateTo({
          url: `/pagesSub/nationalCollegeEntranceExamination/selectMenu/index`,
        });
      } else if (item.itemId === 5) {
        let url;
        if (env == "test") {
          url = `https://3gtest.crm1001.com/disc/#/disc/question?personId=${this.personId}&iname=${this.personId}&cardType=${this.cardType}&phone=18825449087&discLeftUseNum=${this.discLeftUseNum}&from=miniprogramV2&tryAgain=1`;
        } else if (env == "pro" || env == "pre") {
          url = `https://3g.crm1001.com/v2/disc/#/disc/question?personId=${this.personId}&iname=${this.personId}&cardType=${this.cardType}&phone=18825449087&discLeftUseNum=${this.discLeftUseNum}&from=miniprogramV2&tryAgain=1`;
        }
        uni.reLaunch({
          url:
            "/pagesSub/public/web/descWebView?link=" + encodeURIComponent(url),
        });
        console.log("这里是性格测评");
      }
    },
  },
};
</script>
<style lang="scss" scoped>
@font-face {
  font-family: "AlimamaShuHeiTi-Bold";
  /*定义字体名称*/
  src: url("https://img3.job1001.com/ypMp/elan/images/saas/AlimamaShuHeiTi-Bold.ttf");
}
@keyframes slide {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }
  10% {
    opacity: 1;
    transform: translateY(0%);
  }
  20% {
    opacity: 1;
    transform: translateY(0%);
  }
  30% {
    opacity: 0;
    transform: translateY(-100%);
  }
  100% {
    opacity: 0;
    transform: translateY(-100%);
  }
}
.content {
  margin-bottom: -35px; // 不知道为什么总有个pageWrap比内容高了一截导致底部有白色空白
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  // justify-content: center;
  position: relative;
  background-image: url($img-base + "career/positionDictionary/career_search_bg.png");
  background-size: 100% 100%;
  // height: 85vh;
  background-repeat: no-repeat;
  // padding-bottom: 10rpx;
  .nav-title {
    width: 100%;
    margin: 0 auto;
    margin-top: 50rpx;
    height: 60rpx;
    // color: #222;
    // font-size: 48rpx;
    // font-weight: bold;
    // font-family: AlimamaShuHeiTi;
    // text-align: center;
    // line-height: 68rpx;
    // background-image: url($img-base + "career/positionDictionary/gkjbtm.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .yl-job {
    width: 122rpx;
    margin: 0 auto;
    margin-top: 20rpx;
    height: 24rpx;
    color: #222;
    font-size: 48rpx;
    font-weight: bold;
    font-family: "AlimamaShuHeiTi-Bold";
    text-align: center;
    line-height: 24rpx;
    background-image: url($img-base + "career/positionDictionary/yilanzhitu.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  .search-content {
    display: flex;
    height: 110rpx;
    margin: 54rpx 32rpx;
    padding: 20rpx 46rpx;
    align-items: center;
    border: 5rpx solid #222;
    background-color: #fff;
    border-radius: 24rpx;
    justify-content: space-between;

    .search-title {
      font-size: 36rpx;
      font-weight: 400;
      text-align: center;
      color: #92abc4;
    }

    .search-icon {
      width: 40rpx;
      height: 36rpx;
    }
  }

  .icon-content {
    display: flex;
    flex-direction: row;
    // margin: 0rpx 54rpx 48rpx 54rpx;
    margin-bottom: 48rpx;
    // padding: 0 100rpx 0 0rpx;
    // justify-content: space-between;
    align-items: center;
    width: 100%;
    // overflow: scroll;
    white-space: nowrap;
    .icon-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      min-width: 100rpx;
      flex-shrink: 0;
      height: 100rpx;
      .item-icon {
        width: 94rpx;
        height: 94rpx;
        margin: 0 auto;
      }

      .icon-title {
        margin-top: 24rpx;
        text-align: center;
        font-size: 26rpx;
        font-weight: 400;
        color: #333;
      }
    }
  }

  .banner-box {
    margin: 0 32rpx;
    margin-top: -20rpx;
  }
}

.bannerContainer {
  margin: 0 32rpx;

  image {
    width: calc(100vw - 64rpx);
    height: 160rpx;
  }
  .golden-plan-card {
    padding: 36rpx 24rpx;
    // margin: 0 0 36rpx;
    border-radius: 16rpx;
    background-color: white;
    .golden-plan-title {
      display: flex;
      justify-content: space-between;
      &-left {
        &-main {
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 32rpx;
          color: #222222;
          line-height: 36rpx;
          text-align: left;
          font-style: normal;
        }
        &-sub {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #acbac5;
          line-height: 36rpx;
          text-align: left;
          font-style: normal;
          margin-top: 8rpx;
        }
      }
      &-right {
        display: flex;
        align-items: flex-start;
        position: relative;
        height: 80rpx;
        width: 278rpx;
        overflow: hidden;
        &::after {
          content: "";
          position: absolute;
          bottom: 0;
          width: 278rpx;

          height: 40rpx;
          background: linear-gradient(
            to top,
            rgba(255, 255, 255, 0.65),
            rgba(255, 255, 255, 0.65) 50%,
            transparent
          );
        }
      }
    }
    .golden-plan-content {
      margin: 36rpx 0 0;
      &-item {
        display: flex;
        margin-bottom: 36rpx;
        border-radius: 16rpx;
        background: linear-gradient(170deg, #f6fdff 0%, #f6fdff 100%);
        &:last-of-type {
          margin-bottom: 0rpx;
        }
        &-left {
          position: relative;
          &-image {
            width: 268rpx;
            height: 240rpx;
            // background: #8fb6fe;
            // opacity: 0.07;
          }
          &-desc {
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            left: 0rpx;
            bottom: -2rpx;
            width: 100%;
            height: 74rpx;
            border-radius: 16rpx;
            font-family: PingFang-SC, PingFang-SC;
            font-weight: 800;
            font-size: 30rpx;
            color: #ffffff;
          }
        }
        &-right {
          padding: 16rpx 16rpx 18rpx 24rpx;
          border-radius: 0rpx 16rpx 16rpx 0rpx;
          &-top {
            position: relative;
            display: flex;
            align-items: center;
            &-avatar {
              display: grid;
              &-item {
                grid-area: 1 / 1;
                width: 40rpx;
                height: 40rpx;
                border: 1rpx solid #ffffff;
                margin-right: 14rpx;
                border-radius: 50%;
                opacity: 0;
                // // transition: opacity 1s ease-in-out;
                visibility: hidden;
                &.show {
                  visibility: visible;
                  opacity: 1;
                }
              }
            }

            &-desc {
              font-family: PingFang-SC, PingFang-SC;
              font-weight: bold;
              font-size: 28rpx;
              color: #444444;
              line-height: 36rpx;
              text-align: left;
              font-style: normal;
            }
            &-icon {
              width: 24rpx;
              height: 24rpx;
            }
          }
          &-mid {
            display: grid;
            position: relative;
            width: 338rpx;
            height: 80rpx;
            font-family: PingFangSC, PingFang SC;
            // font-weight: 400;
            font-size: 26rpx;
            color: #9baebb;
            line-height: 40rpx;
            text-align: left;
            font-style: normal;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            text-overflow: ellipsis;
            white-space: normal;
            overflow: hidden;
            margin-top: 14rpx;
            &-item {
              display: -webkit-box;
              grid-area: 1 / 1;
              width: 338rpx;
              height: 80rpx;
              font-size: 26rpx;
              opacity: 0;
              // transition: opacity 1s ease-in-out;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              text-overflow: ellipsis;
              white-space: normal;
              line-height: 40rpx;
              &.active {
                opacity: 1;
                // background-color: white;
                // z-index: 10;
              }
            }
          }
          &-btm {
            margin-top: 18rpx;
            &-btn {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 168rpx;
              height: 56rpx;
              background: #fff2ea;
              border-radius: 200rpx;
              border: 1.6rpx solid #fd6f1a;
              font-family: PingFang-SC, PingFang-SC;
              font-weight: bold;
              font-size: 26rpx;
              color: #fd6f1a;
              line-height: 36rpx;
              text-align: left;
              font-style: normal;
            }
          }
        }
      }
    }
  }
}
.hotArticleListContainer {
  width: calc(100vw - 64rpx);
  margin: 48rpx 32rpx 0;
  border-radius: 16rpx;
  background: #ffffff;
  padding: 32rpx 24rpx;
  .title-container {
    position: relative;
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: space-between;
    .listTitle {
      display: flex;
      font-family: PingFangSC, PingFang SC;
      font-weight: bold;
      font-size: 32rpx;
      color: #333333;
      line-height: 36rpx;
      text-align: left;
      font-style: normal;
      .titleIcon {
        width: 36rpx;
        height: 36rpx;
        margin-right: 16rpx;
      }
    }
    .concernFirst {
      width: 264rpx;
      // height: 56rpx;
      // background: #fff2ea;
      border-radius: 200rpx;
      display: flex;
      font-family: PingFangSC, PingFang SC;
      font-weight: 800;
      font-size: 26rpx;
      color: #fd6f1a;
      height: 70rpx;
      position: absolute;
      right: 0;
      top: -20rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      // padding-left: 24rpx;
      .titleIcon {
        width: 36rpx;
        height: 36rpx;
        margin-left: 12rpx;
      }
    }
    .concern {
      width: 224rpx;
      // height: 56rpx;
      // background: #fff2ea;
      border-radius: 200rpx;
      display: flex;
      font-family: PingFangSC, PingFang SC;
      font-weight: 800;
      font-size: 26rpx;
      color: #fd6f1a;
      height: 70rpx;
      position: absolute;
      right: 0;
      top: -20rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      // padding-left: 24rpx;
      .titleIcon {
        width: 36rpx;
        height: 36rpx;
        margin-left: 12rpx;
      }
    }
  }

  .hotArticleList {
    margin-top: 38rpx;
    // max-height: 500rpx;
    .hotArticleItem {
      display: flex;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #333333;
      // line-height: 36rpx;
      text-align: left;
      font-style: normal;
      margin-top: 32rpx;
      &:first-of-type {
        margin-top: 0;
      }
      .hotArticleIndex {
        width: 44rpx;
        height: 44rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #ff6d00;
        // line-height: 36rpx;
        text-align: center;
        font-style: normal;
        margin-right: 20rpx;
      }
      .hotArticleTitle {
        width: 540rpx;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
    }
  }
  .certificationList {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    margin-top: 38rpx;
    .certification-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      img {
        width: 302rpx;
        height: 204rpx;
      }
      .intro {
        margin-top: 24rpx;
        width: 302rpx;
        flex-wrap: wrap;
        text-align: center;
      }
    }
  }
}
.about-yl {
  height: 382rpx;
  margin-top: 86rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  // justify-content: center;
  background-image: url($img-base + "career/positionDictionary/bottom-bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  .jump-btn {
    margin-top: 48rpx;
    width: 248rpx;
    height: 64rpx;
    border-radius: 33rpx;
    border: 2rpx solid #dee7f0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-family: PingFang-SC, PingFang-SC;
    font-weight: 500;
    font-size: 22rpx;
    color: #a6b9cd;
    .right-arrow {
      width: 20rpx;
      height: 20rpx;
      margin-left: 10rpx;
    }
  }
  .intro {
    font-family: PingFang-SC, PingFang-SC;
    font-weight: bold;
    font-size: 28rpx;
    color: #c0cede;
    line-height: 40rpx;
    margin-top: 48rpx;
  }
  .intro-company {
    font-family: PingFang-SC, PingFang-SC;
    font-weight: 500;
    font-size: 24rpx;
    color: #8ea4bc;
    line-height: 34rpx;
    margin-top: 16rpx;
  }
}
</style>
